import { createStore } from "vuex";
import createPersistedState from "vuex-persistedstate";

export default createStore({
    state: {
        userInfo: {},
        position: {
            lng: "",
            lat: "",
        },
        carts: [],
        positions: [],
        workbook: {},
    },
    getters: {
        userInfo: (state) => {
            return state.userInfo;
        },
        position: (state) => {
            return state.position;
        },
        carts: (state) => {
            const info = state.carts.find(
                (ele) => ele.userId == state.userInfo.id
            );
            return info ? info.carts : [];
        },
        positions: (state) => {
            return state.positions;
        },
        workbook: (state) => {
            return state.workbook;
        },
    },
    mutations: {
        SAVE_WORD_BOOK(state, payload) {
            state.workbook = payload;
        },
        SAVE_USERINFO(state, payload) {
            state.userInfo = payload;
        },
        SET_USERINFO(state, payload) {
            state.userInfo = payload;
        },
        LOGINOUT(state) {
            state.userInfo = {};
        },
        SAVE_POSITION(state, payload) {
            state.position = payload;
        },
        ADD_CARTS(state, payload) {
            let obj = state.carts.find(
                (ele) => ele.userId == state.userInfo.id
            );
            if (!obj) {
                state.carts.push({
                    userId: state.userInfo.id,
                    carts: [{ ...payload, count: 1 }],
                });
            } else {
                const index = obj.carts.findIndex(
                    (ele) => ele.id == payload.id
                );
                if (index !== -1) {
                    obj.carts[index].count = obj.carts[index].count + 1;
                } else {
                    obj.carts.push({
                        ...payload,
                        count: 1,
                    });
                }

                state.carts = state.carts.map((ele) => {
                    if (ele.userId == state.userInfo.id) {
                        return obj;
                    } else {
                        return ele;
                    }
                });
            }
        },
        REMOVE_CARTS(state, payload) {
            let obj = state.carts.find(
                (ele) => ele.userId == state.userInfo.id
            );
            console.log(obj);
            if (obj) {
                const index = obj.carts.findIndex(
                    (ele) => ele.id == payload.id
                );
                console.log(index);
                if (index !== -1) {
                    if (obj.carts[index].count == 1) {
                        obj.carts = obj.carts.filter(
                            (item) => item.id != payload.id
                        );
                    } else {
                        obj.carts[index].count = obj.carts[index].count - 1;
                    }
                    state.carts = state.carts.map((ele) => {
                        if (ele.userId == state.userInfo.id) {
                            return obj;
                        } else {
                            return ele;
                        }
                    });
                }
            }
        },
        CLEAR_CARTS(state) {
            state.carts = state.carts.filter(
                (ele) => ele.userId != state.userInfo.id
            );
        },

        ADD_POSITION(state, payload) {
            state.positions.push({
                id: state.positions.length + 1,
                position: payload,
            });
        },
        REMOVE_POSITION(state, payload) {
            state.positions = state.positions.filter(
                (ele) => ele.id != payload
            );
        },
    },
    actions: {
        setUserInfo({ commit }, payload) {
            commit("SET_USERINFO", payload);
        },
        loginout({ commit }) {
            commit("LOGINOUT");
        },
    },
    modules: {},
    plugins: [
        createPersistedState({
            storage: window.sessionStorage,
            paths: ["userInfo", "position", "workbook"],
            key: "shopping_rental",
        }),
        createPersistedState({
            storage: window.localStorage,
            paths: ["carts", "positions"],
            key: "shopping_rental_carts",
        }),
    ],
});
